<html>
<head>
    <title>表单验证</title>
    <!--设置标题-->
    <meta charset="UTF-8"/>
    <!--设置编码集-->
    <style>
        table {
            border: 1px solid blue;
            border-collapse: collapse;
            width: 700px;
            margin: 10px auto;
        }

        table td, table th {
            border: 1px solid blue;
            padding: 5px;
            text-align: center;
            width: 300px;
        }

        table th {
            width: 100px;
        }
    </style>
</head>
<script>
    window.onload = function () {
        // TODO 页面加载成功，执行
        let form = document.getElementById("user_form");
        // 获取表单
        let table = form.getElementsByTagName("table")[0];
        // 获取 表单下的 table
        let tr = table.getElementsByTagName("tr");
        // 获取 table 下的 所有 tr
        let lastTr = tr[tr.length - 1];
        // 获取最后一个 tr
        let trToTh = lastTr.getElementsByTagName("th")[0];
        // 获取 tr 下的 th
        let trToThToInputs = trToTh.getElementsByTagName("input");
        // 获取所有的 input
        let submit = trToThToInputs[trToThToInputs.length - 1];
        // 提交按钮
        submit.onclick = submitJudgment;
    }

    function submitJudgment() {
        // TODO 提交判断

    }

    function userJudgment(user) {
        // TODO 用户名判断
    }

    function passwordJudgment(password) {
        // TODO 密码判断
    }

    function repeatPasswordJudgment(repeatPassword) {
        // TODO 重复密码判断
    }

    function genderJudgement(gender) {
        // TODO 性别判断
    }
</script>
<body>
<form id="user_form" action="" method="get">
    <table>
        <tr>
            <th>用户名:</th>
            <td><input type="text" name="userName"/></td>
            <td><span id="span_username"></span></td>
        </tr>
        <tr>
            <th>密码:</th>
            <td><input type="text" name="userPassword"/></td>
            <td><span id="span_userPassword"></span></td>
        </tr>
        <tr>
            <th>重复密码:</th>
            <td><input type="text" name="repeatThePassword"/></td>
            <td><span id="span_repeatThePassword"></span></td>
        </tr>
        <tr>
            <th>性别:</th>
            <td>男:<input type="radio" name="sex" value="nan"/> |
                女:<input type="radio" name="sex" value="nv"/>
            </td>
            <td><span id="span_sex"></span></td>
        </tr>
        <tr>
            <th>电话:</th>
            <td><input type="text" name="phone"/></td>
            <td><span id="span_phone"></span></td>
        </tr>
        <tr>
            <th>邮箱:</th>
            <td><input type="text" name="mail"/></td>
            <td><span id="span_mail"></span></td>
        </tr>
        <tr>
            <th>爱好:</th>
            <td>篮球:<input type="checkbox" name="enjoy" value="lq"/> |
                足球:<input type="checkbox" name="enjoy" value="zq"/> |
                排球:<input type="checkbox" name="enjoy" value="pq"/> |
                台球:<input type="checkbox" name="enjoy" value="tq"/></td>
            <td><span id="span_enjoy"></span></td>
        </tr>
        <tr>
            <th>住址:</th>
            <td><input type="text" name="address"/></td>
            <td><span id="span_address"></span></td>
        </tr>
        <tr>
            <th>自我介绍:</th>
            <td><textarea name="show" rows="5" cols="20"></textarea></td>
            <td><span id="span_show"></span></td>
        </tr>
        <tr>
            <th colspan="3">
                <input type="reset" value="重填"/>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" value="注册"/>
            </th>
        </tr>
    </table>

</form>
</body>
</html>